<template>
  <el-card
    class="situation"
    shadow="hover"
  >
    <template #header>
      <div class="header-wrapper">
        <div class="title">
          <el-icon size="13">
            <i class="iconfont icon-barchart" />
          </el-icon>
          {{ $t("form.statistics.week") }}
        </div>
        <div class="date-picker">
          <el-date-picker
            size="default"
            v-model="dateRange"
            :end-placeholder="$t('form.statistics.endDate')"
            :shortcuts="shortcuts"
            :start-placeholder="$t('form.statistics.startDate')"
            range-separator="-"
            type="datetimerange"
            value-format="YYYY-MM-DD HH:mm:ss"
            @change="handleDateChange"
          />
        </div>
      </div>
    </template>
    <t-chart
      style="width: 100%; height: 390px; margin: 0 auto"
      :init-options="initOptions"
      :option="option"
      v-if="showChart"
      theme="tduck-echarts-theme"
    />
  </el-card>
</template>

<script>
import TChart from "@/views/components/TChart/index.vue";
import { getFormSituationRequest } from "@/api/project/report";
import { i18n } from "@/i18n";

export default {
  components: {
    TChart
  },
  props: {
    formKey: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      dateRange: null,
      showChart: false,
      initOptions: {
        renderer: "svg"
      },
      shortcuts: [
        {
          text: this.$t("form.statistics.thisWeek"),
          value: () => {
            const end = new Date();
            const start = new Date();
            // 获取本周一
            const day = start.getDay() || 7;
            start.setDate(start.getDate() - (day - 1));
            start.setHours(0, 0, 0, 0);
            end.setHours(23, 59, 59, 999);
            return [start, end];
          }
        },
        {
          text: this.$t("form.statistics.thisMonth"),
          value: () => {
            const end = new Date();
            const start = new Date();
            start.setDate(1);
            start.setHours(0, 0, 0, 0);
            end.setHours(23, 59, 59, 999);
            return [start, end];
          }
        },
        {
          text: this.$t("form.statistics.thisQuarter"),
          value: () => {
            const end = new Date();
            const start = new Date();
            const quarter = Math.floor(start.getMonth() / 3);
            start.setMonth(quarter * 3);
            start.setDate(1);
            start.setHours(0, 0, 0, 0);
            end.setHours(23, 59, 59, 999);
            return [start, end];
          }
        },
        {
          text: this.$t("form.statistics.thisYear"),
          value: () => {
            const end = new Date();
            const start = new Date();
            start.setMonth(0);
            start.setDate(1);
            start.setHours(0, 0, 0, 0);
            end.setHours(23, 59, 59, 999);
            return [start, end];
          }
        }
      ],
      option: {
        tooltip: {
          trigger: "axis",
          extraCssText: "z-index:1"
        },
        grid: {
          top: "5%",
          left: "2%",
          right: "4%",
          bottom: "0%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: [],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            minInterval: 10
          }
        ],
        series: [
          {
            name: i18n.global.t("form.statistics.recoveryAmount"),
            stack: i18n.global.t("form.statistics.count"),
            type: "line",
            data: [],
            smooth: true,
            areaStyle: {},
            itemStyle: {
              borderRadius: [0, 5, 5, 0]
            }
          }
        ]
      }
    };
  },
  mounted() {
    this.getProjectSituation();
  },
  methods: {
    handleDateChange(val) {
      if (val) {
        this.getProjectSituation();
      }
    },
    getProjectSituation() {
      const params = {
        formKey: this.formKey
      };

      if (this.dateRange) {
        params.startDate = this.dateRange[0];
        params.endDate = this.dateRange[1];
      }

      getFormSituationRequest(params).then(res => {
        this.option.xAxis[0].data = res.data.map(item => {
          return item.createTime;
        });
        this.option.series[0].data = res.data.map(item => {
          return item.count;
        });
        this.showChart = true;
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.situation {
  width: 100%;
}

:deep(.el-card__header) {
  padding: 10px 20px !important;
}

.header-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.date-picker {
  margin-left: 16px;
}
</style>
